<#assign menu="events">
<#assign submenu="events_add">
<#include "/system/head.ftl">
<link rel="stylesheet" type="text/css" href="${basePath}/assets/global/plugins/select2/select2.css"/>
<link rel="stylesheet" type="text/css"
      href="${basePath}/assets/global/plugins/jquery-multi-select/css/multiple-select.css"/>

<script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=0124fded525ed5c45b8bc81d43a0db5a"></script>
<style>

</style>

<body>
<section id="main-content">
    <section class="wrapper">
        <div class="tab-content">

            <div class="tab-pane active" id="tab_2">
                <div class="portlet box blue">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-gift"></i>添加兴趣
                        </div>
                    </div>
                    <div class="portlet-body form">

                        <form id="addForm" method="post" action="${basePath}/admin/events/add.json" autocomplete="off"
                              class="form-horizontal">
                            <input type="hidden" name="images" id="images">
                            <input type="hidden" name="appUserId" id="appUserId">

                            <div class="form-body">


                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">活动用户
                                                <span class="required" aria-required="true">* </span>

                                            </label>

                                            <div class="col-md-10">
                                                <input type="text" id="appUser-select"
                                                       class="form-control select2 select2-offscreen" tabindex="-1"
                                                       title="">

                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6" style="text-align:center">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">活动名
                                                <span class="required" aria-required="true">* </span>
                                            </label>

                                            <div class="col-md-10" id="name">
                                                <input name="name" type="text" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">活动图片
                                                <span class="required" aria-required="true">* </span></label>

                                            <div class="col-md-10">
                                                <div id="attachment"></div>
                                                <button id="file_upload" class="btn btn-shadow btn-info"
                                                        type="button">
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6" style="text-align:center">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">活动描述
                                                <span class="required" aria-required="true">* </span>
                                            </label>

                                            <div class="col-md-10">
                                                <input name="description" type="text" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6" style="text-align:center">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">活动类型
                                                <span class="required" aria-required="true">* </span>
                                            </label>


                                            <div class="col-md-10">

                                                <select multiple="multiple" id="interest-select" name="interestIds">
                                                <#list interestList as e>
                                                    <option value=${e.id}>${e.name}</option>
                                                </#list>
                                                </select>

                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6" style="text-align:center">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">推送组
                                                <span class="required" aria-required="true">* </span>
                                            </label>

                                            <div class="col-md-10">
                                                <select name="pushId" id="push-select"
                                                        class="selectpicker show-tick dropup form-control">
                                                <#list pushList as e>
                                                    <option value=${e.id}>${e.name}</option>
                                                </#list>

                                                </select>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">地址
                                                <span class="required" aria-required="true">* </span>
                                            </label>

                                            <div class="col-md-10">
                                                <div class="input-group">
                                                    <input name="createAddress" type="text" class="form-control"
                                                           id="address">
                                                <span class="input-group-btn">
                                                <button id="genpassword" class="btn btn-success" type="button"
                                                        onClick="geocoder()"><i class="fa fa-arrow-left fa-fw"></i>
                                                    获取经纬度
                                                </button>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">纬度</label>

                                            <div class="col-md-9">
                                                <input name="latitude" type="text" class="form-control"
                                                       id="latitude" readonly>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">经度</label>

                                            <div class="col-md-9">

                                                <input name="longitude" type="text" class="form-control"
                                                       id="longitude" readonly>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                            </div>

                            <div class="form-actions fluid">
                                <div class="col-md-offset-6 col-md-6">
                                    <button type="submit" class="btn blue">提交</button>
                                </div>
                            </div>

                        </form>


                    </div>
                </div>
            </div>
        </div>
    </section>
</section>
</body>

<#include "/system/foot.ftl">

<script language="javascript"
        src="${basePath}/assets/global/plugins/jquery-multi-select/js/multiple.select.js"></script>
<script>
    var kd=$("#name").width();
    $("#interest-select").multipleSelect({
        width: kd,
        multiple: true,
        multipleWidth: 55
    });
</script>

<script>


    $('#addForm').validate({
        submitHandler: function (form) {
            $("#appUserId").val(selectedAppUser.id);
            $('#addForm').ajaxSubmit(function (data) {

                if (data.result) {

                    location.href = "${basePath}/admin/events/list.htm";
                } else {
                    $('.alert-danger span', $('#addForm')).html(data.msg);
                    $('.alert-danger', $('#addForm')).show();
                }
            });
        }
    });


</script>

<script language="javascript">
    var mapObj;
    var marker = new Array();
    var windowsArr = new Array();

    mapObj = new AMap.Map("iCenter");

    function geocoder() {
        var MGeocoder;
        //加载地理编码插件
        mapObj.plugin(["AMap.Geocoder"], function () {
            MGeocoder = new AMap.Geocoder({
                radius: 5000 //范围，默认：500
            });
            //返回地理编码结果
            AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack);
            //地理编码
            MGeocoder.getLocation($("#address").val());
        });
    }
    //地理编码返回结果展示
    function geocoder_CallBack(data) {
        var resultStr = "";
        //地理编码结果数组
        var geocode = new Array();
        geocode = data.geocodes;
        console.log(data);
        $("#longitude").val(geocode[0].location.getLng());
        $("#latitude").val(geocode[0].location.getLat());

    }


</script>


<script type="text/javascript">
    var kindId = "${kindId}";
    var kind = "article";
    $.extend({
        getAttachment: function () {
            $.getJSON("${basePath}/admin/attachment/list.json?kindId=" + kindId + "&v=" + Math.random(), function (data) {
                $('#attachment').html("");
                $.addAttachment(data.attachmentList);
            });
        },

        addAttachment: function (list) {
            console.log(list);
            var html = '<table class="table"><thead><tr><th>文件名</th><th>链接</th><th>大小</th><th>操作</th></tr></thead><tbody>';
            var urlList = "";
            for (i = 0; i < list.length; i++) {
                var attachment = list[i];
                html += '<tr>';
                if (attachment.type == "photo") {
                    html += '<td>' + attachment.name + '</td>';
                } else {
                    html += '<td>' + attachment.name + '</td>';
                }
                html += '<td><a target="_blank" href="' + attachment.path + '">' + attachment.path + '</a></td><td>' + attachment.size + '</td><td>';
                html += '<a href="javascript:void(0);" title="删除" name="' + attachment.name + '" class="btn btn-danger btn-xs js_delete" attachmentId="' + attachment.attachmentId + '">删除</a> ';
                html += '</td></tr>';
                urlList += attachment.path + ",";
            }
            $("#images").val(urlList);
            html += '</tbody></table>';
            $('#attachment').prepend(html);
            $('#attachment .js_delete').click(function () {
                var file = $(this);
                bootbox.confirm("是否要删除【" + $(this).attr("name") + "】文件？", function (result) {
                    if (result) {
                        $.post("${basePath}/admin/attachment/delete.json", {'attachmentId': file.attr("attachmentId")}, function (data) {
                            if (data.result) {
                                $.getAttachment();
                            }
                        }, "json");
                    }
                });
            });
            $('#attachment .js_status').click(function () {
                $.post("${basePath}/admin/attachment/update_status.json", {
                    'attachmentId': $(this).attr("attachmentId"),
                    'status': $(this).attr("status")
                }, function (data) {
                    if (data.result) {
                        $.getAttachment();
                    }
                }, "json");
            });
            $('#attachment .js_link').click(function () {
                var attachmentId = $(this).attr("attachmentId");
                bootbox.prompt("为此附件增加链接", function (result) {
                    if (result != "") {
                        $.post("${basePath}/admin/attachment/update_link.json", {
                            'attachmentId': attachmentId,
                            'link': result
                        }, function (data) {
                            if (data.result) {
                                $.getAttachment();
                            }
                        }, "json");
                    }
                });
            });
        }
    });

    function initFileUpload() {
        $('#file_upload').uploadify({
            'buttonText': '选择图片',
            'swf': '${basePath}/system/assets/uploadify/uploadify.swf',
            'uploader': '${basePath}/admin/attachment/upload.json;jsessionid=${JSESSIONID}',
            'formData': {'kindId': kindId, 'kind': kind},
            'fileObjName': 'file',
            'fileTypeExts': '*.*',
            'uploadLimit': '1000',
            'method': 'post',
            'onUploadSuccess': function (file, data, response) {
                $.getAttachment();
            }
        });
    }

    $.getAttachment();

    initFileUpload();


    $("#push-select").val("");





    $("#appUser-select").select2({
        placeholder: "请选择用户",
        minimumInputLength: 1,
        id: function (obj) {
            return obj.id;
        },
        ajax: {
            url: "${basePath}/admin/appUser/toSearch.json",

            quietMillis: 1000,
            data: function (term, page) {
                return {
                    name: term

                };
            },
            cache: true,
            results: function (data, page) { // parse the results into the format expected by Select2.
//                console.log(data);
                // since we are using custom formatting functions we do not need to alter remote JSON data
                return {
                    results: jQuery.parseJSON(data.t)
                };
            }
        },


        formatResult: movieFormatResult,
        formatSelection: function (appUser) {
            selectedAppUser = appUser;
            return appUser.name;
        },
        dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
        escapeMarkup: function (m) {
            return m;
        } // we do not want to escape markup since we are displaying html in results
    });

    var selectedAppUser;
    function movieFormatResult(appUser) {
        var markup = "<table class='movie-result'   ><tr>";
        markup += "<td valign='top' id='appUserId_" + appUser.id + "'>" + appUser.name + "</td>";
        markup += "<td style='font-size: 14px;margin-left: 10px;'>(" + appUser.name + "-" + appUser.address + ")</td>";
        markup += "</td></tr></table>";
        return markup;
    }
</script>



